import React, { useEffect, useState } from 'react';

const UseEffect = () => {
  const url = 'http://geek.itheima.net/v1_0/channels'
  const [list, setList] = useState([])
  /**
   * 组件渲染完毕执行
   * @param {function} 副作用函数，在内部防止要执行的操作
   * @param {Array} 可选 为空时组件渲染完毕后执行一次
   * 
   * 1.没有依赖性 => 初始 + 组件更新
   * 2.空数组依赖 => 初始执行一次
   * 3.传入特定依赖项 => 初始 + 依赖项变化时执行
  */
  useEffect(() => {
    // 实现副作用操作逻辑
    async function getList() {
      const res = await fetch(url)
      const reslist = await res.json()
      setList(reslist.data.channels)
    }
    getList()
    return () => {
      // 清除副作用逻辑 组件卸载时执行
      // eg：清除定时器
    }
  }, [])

  // useEffect(() => {
  //   console.log('执行')
  // }, [list])

  return (
    <div>
      useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作,比如发送AJAX请求，更改DOM等等
      <ul>
        {
          list.map(item => <li key={item.id}>{item.name}</li>)
        }
      </ul>

    </div>
  );
};

export default UseEffect;